{% extends "../main.html" %}
{% block head_js %}
<script src="{{ static_url('echarts/2-2-7/build/dist/echarts.js')}}"></script>
<META HTTP-EQUIV="Refresh" CONTENT="120">
{% end %}

{% block bodyy %}
<h3 class="sub-header" content="">主机信息</h3>
<div id="disk" style="height:400px;"></div>
<h2 class="sub-header"></h2>

<div id="test" style="height:400px;"></div>
<h2 class="sub-header"></h2>

<div id="mem" style="height:400px;"></div>
</div>
<script type="text/javascript">
        require.config({
            paths: {
                echarts:'/static/echarts/2-2-7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('test'));

                option = {
    title : {
        text: 'CPU进程数',
        subtext: 'ip:{{ips}}',
       // x: 'center'
    },
    tooltip : {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + '<br/>'
                   + params[0].seriesName + ' : ' + params[0].value + ' (个)<br/>'
                   + params[1].seriesName + ' : ' + params[1].value + ' (个)<br/>'
        }
    },
    legend: {
        data:['cpuPercent','test'],
      //  x: 'left'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : true,
        realtime : true,
        start : 60,
        end : 100
    },
    xAxis : [
        {
            splitLine:{show: false},
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: false},
            data :{% raw tms %}
        }
    ],
    yAxis : [
        {
            name : '进程数量',
            type : 'value',
           // max : 150
        }
    ],
    series : [
        {
            name:'cpuPercent',
            type:'line',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:{{[i for i in cpu_data]}}
        },
        {
            name:'test',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:{{[ i[1][2] for i in data]}}

        }
    ]
};



                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
   </script>
<script type="text/javascript">
        require.config({
            paths: {
                echarts:'/static/echarts/2-2-7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('disk'));

                option = {
    title : {
        text: '磁盘容量',
        subtext: 'ip:{{ips}}',
       // x: 'center'
    },
    tooltip : {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + '<br/>'
                   + params[0].seriesName + ' : ' + params[0].value + ' (G)<br/>'
                   + params[1].seriesName + ' : ' + params[1].value + ' (G)<br/>'
        }
    },
    legend: {
        data:['diskUsed','diskTotal'],
      //  x: 'left'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : true,
        realtime : true,
        start : 60,
        end : 100
    },
    xAxis : [
        {
        splitLine:{show: false},
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: false},
            data :{% raw tms %}
        }
    ],
    yAxis : [
        {
            name : '磁盘容量',
            type : 'value',
           // max : 150
        }
    ],
    series : [
        {
            name:'diskUsed',
            type:'line',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:{{[i[1][3] for i in data]}}
        },
        {
            name:'diskTotal',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:{{[ i[1][2] for i in data]}}

        }
    ]
};



                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
   </script>
<script type="text/javascript">
        require.config({
            paths: {
                echarts:'/static/echarts/2-2-7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('mem'));

                option = {
    title : {
        text: '内存容量',
        subtext: 'ip:{{ips}}',
       // x: 'center'
    },
    tooltip : {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + '<br/>'
                   + params[0].seriesName + ' : ' + params[0].value + ' (M)<br/>'
                   + params[1].seriesName + ' : ' + params[1].value + ' (M)<br/>'
        }
    },
    legend: {
        data:['memUsed','memTotal'],
      //  x: 'left'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : true,
        realtime : true,
        start : 60,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            splitLine:{show: false},
            data :{% raw tms %}
        }
    ],
    yAxis : [
        {
            name : '内存容量',
            type : 'value',
           // max : 150
        }
    ],
    series : [
        {
            name:'memTotal',
            type:'line',

            data:{{[i[1][0] for i in data]}}
        },
        {
            name:'memUsed',
            type:'line',
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:{{[ i[1][1] for i in data]}}

        }
    ]
};



                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
   </script>

{% end %}
